<template>
	<div class="container">
		<div class="abs">
			<el-page-header @back="$router.push('/')" content="">
			</el-page-header>
		</div>
		<div id="main">
		</div>
	</div>
</template>
<script>
export default {
  name: 'Echarts',
  data () {
    return {}
  },

  methods: {
    myEcharts () {
      var echarts = require('echarts')
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom, 'dark')
      var option

      option = {
      	tooltip: {
      		trigger: 'item',
          formatter: '{b}'
      	},
      	legend: {
      		top: '5%',
      		left: 'center'
      	},
      	series: [{
      		name: '营养健康',
      		type: 'pie',
      		radius: ['40%', '70%'],
      		avoidLabelOverlap: false,
      		itemStyle: {
      			borderRadius: 10,
      			borderColor: '#fff',
      			borderWidth: 2
      		},
      		label: {
      			show: false,
      			position: 'center'
      		},
      		emphasis: {
      			label: {
      				show: true,
      				fontSize: '40',
      				fontWeight: 'bold'
      			}
      		},
      		labelLine: {
      			show: false
      		},
       	data: [{
      				value: 1048,
      				name: '营养结构'
      			},
      			{
      				value: 735,
      				name: '营养分析'
      			},
      			{
      				value: 580,
      				name: '膳食建议'
      			},
      			{
      				value: 484,
      				name: '采购建议'
      			}
      		]
      	}],
        aria: {
		    enabled: true,
		    decal: {
		      show: true
		    }
		  }
      }
      option && myChart.setOption(option)
	  myChart.on('click', function (params) {
	    if (params.value === 484) {
          console.log('采购建议视图导航')
        } else if (params.value === 1048) {
		  window.location.href = '#/jiegou'
        } else if (params.value === 735) {
		  window.location.href = '#/fenxi'
        } else if (params.value === 580) {
		  window.location.href = '#/suggest'
        }
	  })
    }
  },
  created () {},
  mounted () {
    this.myEcharts()
  }
}
</script>

<style scoped>
	@import url("../assets/css/common.css");
	body {
		margin: 0;
	}

	.container {
		position: relative;
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: #100c2a;
		border: 1px solid #797979;
	}

	#main {
		width: 100%;
		height: 100%;
		z-index: 1;
	}
</style>
